<template>
    <div>
         <div class="heart-rate clearfix"  v-if="nowShow" >
                    <div class="heart-top">
                        <i class="heart-icon1" :style= "'background-image: url('+$qiniu.url+'assets/img/course.png)'"></i>
                        <span>心率</span>
                        <i class="heart-icon2" :style= "'background-image: url('+$qiniu.url+'assets/img/course.png)'"  id="heartT" @click="heartTips"></i>
                    </div>
                    <div class="heart-bottom">
                        <div class="heart-info">
                            <div class="heart-jingxin">
                                <input type="text" @click="showHeartActive" id="heart-jingxin" class="rate" placeholder="...">
                            </div>
                            <div class="heart-yundong">
                                <input type="text" @click="showHeartActive" id="heart-yundong" class="rate"  placeholder="...">
                            </div>
                            <div class="heart-jingxin">
                                <button class="btn" @click="computeXinlv">...</button>
                            </div>
                        </div>
                        <div class="heart-name">
                            <span class="name-desc">静心心率</span>
                            <span class="name-desc">运动后心率</span>
                            <span class="name-desc">靶心率</span>
                        </div>
                    </div>
                    <div class="heart-modal">
                        <img :src="$qiniu.url+'assets/img/heart-Tips.png'">
                    </div>
                    <div class="heart-computed">
                        <img :src="$qiniu.url+'assets/img/computed.png'">
                    </div>
         </div>
    </div>
</template>
<script>
import {getToday,errFun} from "../../tools.js";
import "../../../static/css/table-calendar.css";
import api  from "../../api";
import Loading from '../loading';
export default {
           computed:{
                nowShow(){
                    //判断当前的today是否是今日
                    var nowDay=getToday(new Date()).day;//获取当前的时间---即今天的日期
                    var nowMonth=getToday(new Date()).month;
                    var nowYear=getToday(new Date()).year;
                    if(this.today.day<nowDay||this.today.month<nowMonth||this.today.year<nowYear){
                         return false;
                    }else{
                        return true;
                    }
          },
        },
        props:['today'],
        methods:{
             heartTips(){
                var heartT=document.querySelector("#heartT");
                var heartModal=document.querySelector(".heart-modal");
                    if(heartT.className == "heart-icon2"){
                        heartT.className="ques"
                        heartModal.style.display="block";
                    }else{
                        heartT.className="heart-icon2";
                        heartModal.style.display="none";
                }
            },
            //显示选中状态的样式
            showHeartActive(){
                var heartInfo=document.querySelector(".heart-info");
                var inputs=heartInfo.querySelectorAll("input");
                var btn=heartInfo.querySelector(".btn");
                for(var i=0;i<inputs.length;i++){
                     inputs[i].style.background="#fff";
                     inputs[i].placeholder="";
                }
                btn.classList.add("active");
                 btn.innerHTML="";
            },
      //计算心率
      computeXinlv(){
          //点击输入并且计算靶心率
          var heartInfo=document.querySelector(".heart-info");
          var inputs=heartInfo.querySelectorAll("input");
          var jinXing=document.querySelector("#heart-jingxin");
          var yunDong=document.querySelector("#heart-yundong");
          var heartComputed=document.querySelector(".heart-computed");
          var num1,num2;
          var btn=heartInfo.querySelector(".btn");
          //计算输入的值
          var baxin=[];
          num1=(220-23-jinXing.value)*60%+jinXing.value;
          num2=(220-23-jinXing.value)*80%+jinXing.value;
          if(jinXing.value == "" || yunDong.value == ""){
              return false;
          }
          else{
          heartComputed.style.display="block";
          baxin.push(num1,num2);
          btn.classList.remove("active");
          for(var i=0;i<inputs.length;i++){
               inputs[i].style.background="none";
          }
          inputs[0].value=jinXing.value;
          inputs[1].value=yunDong.value;
          btn.innerHTML=baxin[0]+"~"+baxin[1];
          var objXin={
              before:jinXing.value,
              after:yunDong.value,
          }
          api.getHeart(objXin).then(function(result){
              heartComputed.style.display="none";
          },errFun)
          }

      },
        }
    }
</script>
<style scoped>
.heart-rate{
    width:100%;
    height:170px;
    background:#31384b;
    margin-bottom:15px;
    position:relative;
    color:#d7d6db;
}
.heart-rate .heart-top{
    width:100%;
    height:50px;
    border-bottom:1px solid #22293b;
    position:relative;
}
.heart-rate .heart-top .heart-icon1{
    display:block;
    position:absolute;
    top:0px;
    left:10px;
    transform:translateY(30%);
    width: 30px;
    height: 30px;
    background-position:-5px 0;
    background-repeat:no-repeat;
    background-size:  300px 40px;
}
.heart-rate .heart-top span{
    width:40px;
    display:block;
    margin-left:46px;
    text-align:center;
    font-size:16px;
    line-height: 50px;
}
.heart-rate .heart-top .heart-icon2{
    display:block;
    position:absolute;
    top:-4px;
    right:10px;
    transform:translateY(30%);
    width: 25px;
    height: 30px;

    background-position:-125px 0;
    background-repeat:no-repeat;
    background-size:  300px 40px;
}
.heart-rate .heart-top .ques{
     display:block;
    position:absolute;
    top:-4px;
    right:10px;
    transform:translateY(30%);
    width: 25px;
    height: 30px;
        background-position:-220px 0;
    background-repeat:no-repeat;
    background-size:  300px 40px;
}
.heart-rate .heart-bottom{
    width:100%;
    height:120px;
    padding:20px 0;
    box-sizing:border-box;
}
.heart-rate .heart-bottom .heart-info{
    width:100%;
    height:60px;
    box-sizing:border-box;
}
.heart-rate .heart-bottom .heart-info div{
    width:33.333%;
    height:100%;
    border-right:1px solid #22293b;
    padding-top:20px;
    float:left;
    box-sizing:border-box;
    position:relative;
}
.heart-rate .heart-bottom .heart-info div:nth-child(3){
    border-right:none;
}
.heart-rate .heart-bottom .heart-info div .rate{
    width:60%;
    height:30px;
    font-size:16px;
    line-height: 30px;
    color:#d7d6db;
    text-align:center;
    margin-left:20%;
    outline:none;
    background:none;
    border-radius: 10px;
}
.heart-rate .heart-bottom .heart-info div .btn{
    width:42px;
    height:36px;
    font-size:18px;
    line-height: 30px;
    color:#d7d6db;
    text-align:center;
    outline:none;
    border-radius: 50%;
    border:none;
    background: #31384b;
    position:absolute;
    top:25%;
    left:50%;
    transform:translate(-50%);
}
.heart-rate .heart-bottom .heart-info div .btn.active{
    font-size:16px;
    line-height: 30px;
    /*background:url('../../assets/img/course.png') -175px 0 no-repeat;*/
    background-size:  300px 40px;
}
.heart-rate .heart-bottom .heart-info div .pen{
    width:25px;
    height:30px;
    position:absolute;
    top:20%;
    left:50%;
    transform:translate(-50%);
    /*background:  url("../../assets/img/course.png") -270px 0 no-repeat;*/
    background-size:  300px 40px;
}
.heart-rate .heart-bottom .heart-name{
    width:100%;
    height:20px;
}
.heart-rate .heart-bottom .heart-name .name-desc{
    display:block;
    width:33.333%;
    height:100%;
    text-align:center;
    font-size:12px;
    line-height: 20px;
    color:#d7d6db;
    float:left;
    box-sizing:border-box;
}
/*心率的模态框 */
.heart-modal{
    width:80%;
    position:absolute;
    top:-10px;
    left:10px;
    margin-left:20px;
    display: none;
}
.heart-modal img{
    width:100%;
}
/*计算成功的模态框*/
.heart-computed{
    width:60%;
    position:absolute;
    top:40px;
    left:40px;
    margin-left:20px;
    display: none;
}
.heart-computed img,.weight-computed img{
    width:100%;
}
.weight-computed{
    display: none;
    width:60%;
    position:absolute;
    top:-10px;
    left:60px;
    margin-left:20px;

}
</style>
